<template>
  <div class="copy" @click="toCopy" :style="{ justifyContent: contentFix }">
    <slot name="copyMsg"></slot>

    <img
      src="../assets/image/comm/copy.png"
      class="img"
      :style="{ fontSize: fontSize }"
      v-if="noFlag"
    />
  </div>
</template>

<script>
import { Toast } from "vant"; // 确保你已经全局引入了 Vant 的 Toast
import { copyText } from "vue-clipboard2";

export default {
  props: {
    data: {
      type: [String, Number],
      default: "",
    },
    contentFix: {
      type: String,
      default: "space-between",
    },
    fontSize: {
      type: String,
      default: "14px",
    },
    noFlag: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    toCopy() {
      const input = document.createElement("input");
      input.value = this.data; // 设置要复制的文本
      document.body.appendChild(input); // 添加input元素
      input.select(); // 选中文本
      document.execCommand("copy"); // 执行复制操作
      document.body.removeChild(input); // 移除input元素
      Toast(this.$t("userdo.userdo4"));
    },
    // async toCopy() {
    //   try {
    //     await copyText(this.data);
    //     Toast(this.$t("userdo.userdo4"));
    //   } catch (error) {
    //     console.error("复制失败:", error);
    //     Toast(this.$t("userdo.userdo5"));
    //   }
    // },
  },
};
</script>

<style lang="scss" scoped>
.copy {
  padding: 5px 0;
  display: flex;
  cursor: pointer; /* 增加鼠标指针样式 */

  .img {
    font-size: 24px;
    height: 24px;
    margin-left: 10px;
  }
}
</style>
